<template>
<div class="bg_img conent text-left" ref="homePage">
  <header style="background-color:white;position:absolute;top:0;left:0;right:0;">
    <nav class="navbar navbar-expand-md navbar-dark container" style="background-color:white;background-image: linear-gradient(to bottom,#fff,#fff);border-color:#f5f5f5;min-width:1200px!important;">
      <ul class="navbar-nav" id="Home" style="position:relative;left:90%;">
        <li class="nav-item">
          <img src="../assets/sy2019-5-9.png"  style="width:1.2rem;height:1.2rem;margin-right:10px;margin-bottom:5px;"/>
        </li>
        <li class="nav-item" ><router-link to="yw_Home" style="color: #41bafe">首页</router-link></li>
      </ul>
    </nav>
  </header>
  <div class="contentWrapper_regist contentWrapper_login" v-if="isRegist">
    <div class="leftImg"><img src="../assets/ch2019-5-9.png" alt=""> </div>
    <div class="right_wrapper" >
      <h2 class="text-center" style="padding-bottom: 30px" v-text="loginTitle"></h2>
      <cmInput_login @do_login="do_login($event)"  fre="clear" class="inputGroup" :path="zcDomain +'static/RSImg/phone (2).png'"
                     placeholder="请输入手机号" imgWith="imgWith" v-model="user.Telephone" maxlength="11"></cmInput_login>
      <div class="Codewrapper" v-if="is_login_forget">
        <cmInput_login class="inputGroup" :path="zcDomain +'static/RSImg/yanzhengma.png'" placeholder="请输入验证码" imgWith="imgWith" v-model="user.VerifyCode"></cmInput_login>
        <button class="codeButton" @click="do_getCode" v-text="btntxt" :disabled="disabled" :style="{background:getCode==true?'grey':'#41bafe' }"></button>
      </div>
      <cmInput_login @do_login="do_login($event)" class="inputGroup" :path="zcDomain +'static/RSImg/mima.png'" :placeholder=placeholder imgWith="imgWith" v-model="user.password" type="password"></cmInput_login>
      <cmInput_login @do_login="do_login($event)" class="inputGroup" :path="zcDomain +'static/RSImg/mima.png'" placeholder="请确认新密码" imgWith="imgWith" v-model="user.CofrimPassword" v-if="is_login_forget" type="password"></cmInput_login>
      <div class="chooseContent" v-if="!is_login_forget"><input type="checkbox" @click="do_autoLogin" v-model="loginFree"> <span >自动登录</span> <span class="text-right" @click="do_forget">忘记密码</span></div>
      <button  class="btn btn-block mb-2 btn-login"  type="button" v-text="chooseLogin" @click="do_login"></button>
      <div class="chooseContent"><span v-text="login_reset" @click="do_goToRegist"></span> <span class="text-right" @click="do_help" v-if="!is_login_forget">帮助</span></div>
    </div>
  </div>

  <transition name="fade">
    <cmCofirm
      title="错误"
      confirm="确定"
      :msg=mistakeMsg
      @confirm1="def_confirm($event)"
      v-if="mistake"
    >
    </cmCofirm>
  </transition>

</div>
</template>

<script>
  import cmInput_login from './common/cmInput_login'
  import cmCofirm from './common/cmCofirm'
    export default {
        name: "bsLogin.vue",
      data(){
          return{
            clientHeight:'',
            zcDomain:this.$ZcPublic.Domain,
            mistake:false,
            isRegist:true,
            mistakeMsg:'',
            btntxt:'获取验证码',
            user:{Telephone:'', VerifyCode:'', password:'', CofrimPassword:''},
            disabled:false,
            getCode:false,
            time:'',
            loginFree:false

          }
      },
      props:{
        is_login_forget:{
          type:Boolean,
          default:false
        },
        loginTitle:{
          type:String,
          default:"用户登录"
        },
        chooseLogin:{
          type:String,
          default:"马上登录"
        },
        placeholder:{
          type:String,
          default:"请输入密码"
        },
        login_reset:{
          type:String,
          default:"注册"
        },
      },
      components:{
        cmInput_login,
        cmCofirm
      },
      created(){
      },
      methods:{
        def_changeFixed(clientHeight){        //动态修改样式
          console.log(clientHeight);
          this.$refs.homePage.style.height = clientHeight+'px';
        },
        def_confirm(){
          this.mistake=false
        },
        def_time() {
          this.getCode=true
          if (this.time > 0) {
            this.time--;
            this.btntxt=this.time+"s后重新获取";
            setTimeout(this.def_time, 1000);
          } else{
            this.time=0;
            this.btntxt="获取验证码";
            this.disabled=false;
            this.getCode=false
          }
        },
        do_help(){

        },
        do_getCode(){
          try {
            let me=this;
            let reg=11 && /^[1]([0-9])[0-9]{9}$/;
            if(me.user.Telephone===''){
              me.mistake=true;
              me.mistakeMsg="请输入手机号"
            }else if(!reg.test(me.user.Telephone)){
              this.mistake=true;
              this.mistakeMsg='手机号格式错误'
            } else{
              me.time=60;
              me.disabled=true;
              me.def_time();
              me.$ZcPublic.Server.Post({
                IsNeedLogin:'false',
                Paras:{
                  Name: 'Vue_CustomerResource',
                  Action: 'Ext_PhoneCode',
                  Data:{
                    Telephone:me.user.Telephone,
                    OrganCode: '01' //此值不需要动
                  }
                },
                Callback:me.cb_do_getCode,
                Scope:me
              });

            }
          }catch (e) {
            // zcLogger.Log({
            //   Vue : 'zcPerson.vue',
            //   Fun : 'doAdd',
            //   Msg : e.message
            // });
          }
        },
        do_addUnit(){
       alert('添加')
        },
        do_forget(){
          this.$router.push('/bsGetPassword')

        },
        do_login(){
          let me=this;
          if(this.is_login_forget){
            try {
              if(me.user.Telephone==''){
                this.mistake=true;
                this.mistakeMsg="手机号不能为空！"
                return
              }
              if(me.user.CofrimPassword!=me.user.password){
                this.mistake=true;
                this.mistakeMsg="两次密码不一致！"
                return
              }if(me.user.CofrimPassword==''){
                this.mistake=true;
                this.mistakeMsg="密码不能为空！"
                return
              }if(me.user.VerifyCode==''){
                this.mistake=true;
                this.mistakeMsg="请输入验证码！"
                return
              }
              me.$ZcPublic.Server.Post({
                IsNeedLogin:'false',
                Paras:{
                  Name: 'Vue_CustomerResource',
                  Action: 'Ext_ProjectLeaderChangePwd',
                  Data:{
                    Telephone: me.user.Telephone,
                    Password: me.user.password,
                    VerifyCode:me.user.VerifyCode
                  }
                },
                Callback:me.cb_do_forget,
                Scope:me
              });
            }catch (e) {

            }
          }else {
           try{
             me.$ZcPublic.Server.Post({
               IsNeedLogin:'false',
               Paras:{
                 Name: 'Vue_CustomerResource',
                 Action: 'Ext_ResourceManagement_Login',
                 Data:{
                   Telephone: me.user.Telephone,
                   Password: me.user.password
                 }
               },
               Callback:me.cb_do_login,
               Scope:me
             });
           }catch(e) {
             // me.$ZcPublic.zcLogger.Log({
             //   Vue : 'zcPerson.vue',
             //   Fun : 'doAdd',
             //   Msg : e.message
             // });
           }

          }
        },
        do_autoLogin(){

        },
        do_goToRegist(){
          if(this.is_login_forget){
              this.user.Telephone='';
              this.user.VerifyCode='';
              this.user.CofrimPassword='';
              this.user.password=''
            this.time=0;
            this.btntxt="获取验证码";
          }else{
            this.$router.push('bsRegist')
          }
        },
/*================回调================*/
        cb_do_login(resJson,scope){
          console.log(resJson)
          try {
            if(resJson.success==false){
              this.mistake=true;
              this.mistakeMsg=resJson.msg
            }else {
              console.log(resJson)
              if(this.loginFree){
                localStorage.setItem('loginFree',JSON.stringify(this.user))
              }
              localStorage.setItem('tel',this.user.Telephone)
              sessionStorage.setItem('UserId',resJson.data.PB_Operator.SN);
              let name=resJson.data.PB_Operator.Name.split('(')[0];
              sessionStorage.setItem("userName",name);
              sessionStorage.setItem("workUnitN",resJson.data.WorkUnitName);
              sessionStorage.setItem("WorkUnitSN",resJson.data.WorkUnitSN);
              if(this.$route.query.redirect){
                this.$router.replace({path:this.$route.query.redirect})
              }else if(localStorage.getItem("JumpKey") != 'null' && localStorage.getItem("JumpKey") != '' && localStorage.getItem("JumpKey") != undefined) {
								 window.location.href = localStorage.getItem("JumpKey")
                localStorage.removeItem('JumpKey')
							}
							else {
								this.$router.replace({path:'/yw_Home'})
              }
            }
          }catch (e) {
              alert(e)
          }
        },
        cb_do_getCode(resJson,scope){
          try{
            console.log(resJson)
          }catch (e) {

          }

        },
        cb_do_forget(resJson,scope){
          try {
            console.log(resJson)
            if(resJson.success==true){
            this.$router.push('bsLogin')
            }else {
              this.mistake=true;
              this.mistakeMsg=resJson.msg
            }
          }catch (e) {

          }
        }
      },
      mounted(){
        // 获取浏览器可视区域高度
        this.clientHeight =   `${document.documentElement.clientHeight}`          //document.body.clientWidth;
        //console.log(self.clientHeight);
        window.onresize = function temp() {
          this.clientHeight = `${document.documentElement.clientHeight}`;
        };
      },
      watch: {
        // 如果 `clientHeight` 发生改变，这个函数就会运行
        clientHeight: function () {
          this.def_changeFixed(this.clientHeight)
        },
      },

    }
</script>

<style scoped>
.bg_img{
background-image:url('../assets/bg2019-5-9.png');
background-size: 100% 100%;
  height: 100px;
}
/*====================注册======================================*/
.contentWrapper_regist{
  position: absolute;
  width: 80%;
  height: 500px;
  box-shadow: 3px 3px 5px #b7b7b7;
  top: 52%;
  left: 50%;
  margin-left: -40vw;
  margin-top: -40vh;
  border-radius: 20px;
  display: flex;
  overflow: hidden;
}
  .leftImg{
    width: 58%;
    height: 100%;
    /*background-image: url("../../static/RSImg/ch.png");*/
  }
img{
  width: 100%;
  height: 100%;
}
.right_wrapper{
  padding:30px 30px;
  width: 42%;
  height: 100%;
}
  .inputGroup{
    margin-top: 10px;
  }
  .chooseContent{
    height: 60px;
    line-height: 60px;
    width: 100%;

  }
  .chooseContent span:first-child{
    float: left;
  }
.chooseContent span:last-child{
  float: right;
  margin-right: 30px;
}
.chooseContent span:hover{
  cursor:pointer;
  color: #41bafe;
}
.btn {
  background-color: #41bafe;
  height: 50px;
  color: white;
  box-shadow: 0rem 0.1rem 0.15rem 0.1rem rgba(65, 186, 254, 0.25);
}
.Codewrapper{
  position: relative;
}
.Codewrapper .codeButton{
    position: absolute;
    height: 3rem;
    width: 7.5rem;
    top:0.05rem ;
    right: 0;
    border:none;
    outline: none;
    color: white;
    background-color: #41bafe;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
  }
.codeButton:hover{
  cursor:pointer !important;
  background-color: grey !important;
  color: white !important;
}
/*=================登录===============*/
.contentWrapper_login{
  position: absolute;
  width: 70vw;
  height: 500px;
  box-shadow: 3px 3px 5px #b7b7b7;
  top: 52%;
  left: 50%;
  margin-left: -35vw;
  margin-top: -35vh;
  border-radius: 20px;
  display: flex;
  overflow: hidden;
}
.btn-login{
  margin-top: 10px;
}
/*彈出框*/
.fade-enter-active {
  transition: opacity .5s;
}
 .fade-leave-active{
   transition: opacity .1s;
  }
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave {
  opacity: 1;

}
</style>
